<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo mb-5" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" class="mt-10"/>

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
      <div class="block">
        <div class="pic-container">
        </div>
      </div>
    </div>
  </header>
  <RouterView />
</template>

<style scoped lang="scss">
.pic-container{
  width: 100px;
  height: 500px;
  background-image: url('https://testcdn-zg.shhzcj.com/046606112620373707/7332bf97-f9f1-4e03-a21e-d48e22cc37d91747130811197.jpg');
  background-color: #9b9b9b;
  background-repeat: no-repeat;
}
</style>
